import {FC, useEffect, useRef} from "react";
import {getUserProfile} from "@/apis/recommend";
import {ApiConstants} from "@/apis/constants";
import {errorMessage} from "@/common/components/Message";
import {wordCloudOption} from "@/pages/user/components/wordCloud/wordcloud.option";
import * as echarts from "echarts"
import "echarts-wordcloud"
// import {debounce} from "ts-mango";

export const WordCloud: FC = () => {
    const wordCloudRef: any = useRef()

    useEffect(() => {
        let myChart: any
        getUserProfile().then(({code, data, msg}) => {
            if (code !== ApiConstants.SUCCESS) return errorMessage(msg)
            wordCloudOption.series[0].data = data.map(item => ({
                name: item[1],
                value: item[2]
            }))
            myChart = echarts.init(wordCloudRef.current)
            myChart && myChart.setOption(wordCloudOption)
            console.log(wordCloudOption)
        })

        const chartResize = function(){myChart.resize()}
        window.addEventListener("resize",chartResize)
        // 在组件卸载时销毁图表
        return () => {
            myChart.dispose();
            window.removeEventListener("resize",chartResize)
        };
    }, [])


    return (
        <>
            <div ref={wordCloudRef} style={{width: "100%", height: "100vh"}}></div>
        </>
    )
}
